<template>
    <div class="app-container">
        <!-- 查询和其他操作 -->
        <div class="filter-container" style="margin: 10px 0 10px 0;" v-permission="'/tag/getList'">
            <el-input clearable @keyup.enter.native="handleFind" class="filter-item" style="width: 200px;" v-model="keyword"
                placeholder="请输入标签名"></el-input>
            <el-button class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 10px"
                v-permission="'/tag/getList'" @click="handleFind">查找</el-button>
            <el-button class="filter-item" type="primary" @click="handleAdd" icon="el-icon-edit"
                v-permission="'/tag/add'">添加标签</el-button>
            <el-button class="filter-item" type="danger" icon="el-icon-delete"
                v-permission="'/tag/deleteBatch'">删除选中</el-button>
            <el-button class="filter-item" type="info" icon="el-icon-document"
                v-permission="'/tag/tagSortByClickCount'">点击量排序</el-button>

            <el-button class="filter-item" type="info" icon="el-icon-document" v-permission="'/tag/tagSortByCite'"
                @click="handleTagSortByCite">引用量排序</el-button>
        </div>

        <el-table :data="tableData" style="width: 100%" :default-sort="{ prop: 'sort', order: 'descending' }">
            <el-table-column type="selection"></el-table-column>

            <el-table-column label="序号" width="60" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>

            <el-table-column label="标签名" width="100" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.content }}</span>
                </template>
            </el-table-column>

            <el-table-column label="点击数" width="100" align="center" prop="clickCount" sortable="custom"
                :sort-by="['clickCount']">
                <template slot-scope="scope">
                    <span>{{ scope.row.clickCount }}</span>
                </template>
            </el-table-column>

            <el-table-column label="排序" width="100" align="center" prop="sort" sortable="custom"
                :sort-orders="['ascending', 'descending']">
                <template slot-scope="scope">
                    <el-tag type="warning">{{ scope.row.sort }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="创建时间" width="160" align="center" prop="createTime" sortable="custom"
                :sort-by="['createTime']">
                <template slot-scope="scope">
                    <span>{{ scope.row.createTime }}</span>
                </template>
            </el-table-column>

            <el-table-column label="更新时间" width="160" align="center" prop="updateTime" sortable="custom"
                :sort-by="['updateTime']">
                <template slot-scope="scope">
                    <span>{{ scope.row.updateTime }}</span>
                </template>
            </el-table-column>

            <el-table-column label="状态" width="100" align="center">
                <template slot-scope="scope">
                    <template v-if="scope.row.status == 1">
                        <span>正常</span>
                    </template>
                    <template v-if="scope.row.status == 2">
                        <span>推荐</span>
                    </template>
                    <template v-if="scope.row.status == 0">
                        <span>已删除</span>
                    </template>
                </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" min-width="230">
                <template slot-scope="scope">
                    <el-button type="warning" size="small" @click="handleStick(scope.row)"
                        v-permission="'/tag/stick'">置顶</el-button>
                    <el-button type="primary" size="small" @click="handleEdit(scope.row)"
                        v-permission="'/tag/edit'">编辑</el-button>
                    <el-button type="danger" size="small" v-permission="'/tag/delete'">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <div class="block">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize"
                layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
        </div>

        <!-- 添加或修改对话框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form">

                <el-form-item label="标签名" :label-width="formLabelWidth" prop="content">
                    <el-input v-model="form.content" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
                    <el-input v-model="form.sort" auto-complete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import { getTagList, stickTag, tagSortByCite, editTag } from '@/api/tag'
export default {
    name: '',
    created() {
        this.tagList();
    },
    data() {
        return {
            multipleSelection: [], //多选，用于批量删除
            tableData: [],
            keyword: "",
            currentPage: 1,
            pageSize: 10,
            total: 0, //总数量
            title: "增加标签",
            dialogFormVisible: false, //控制弹出框
            formLabelWidth: "120px",
            isEditForm: false,
            orderByDescColumn: "", // 降序字段
            orderByAscColumn: "", // 升序字段
            form: {
                content: ""
            },
            rules: {
                content: [
                    { required: true, message: '分类名称不能为空', trigger: 'blur' },
                    { min: 1, max: 10, message: '长度在1到10个字符' },
                ],
                sort: [
                    { required: true, message: '排序字段不能为空', trigger: 'blur' },
                    { pattern: /^[0-9]\d*$/, message: '排序字段只能为自然数' },
                ]
            }
        };
    },
    methods: {
        tagList() {
            let params = {}
            params.currentPage = this.currentPage
            params.pageSize = this.pageSize
            params.keyword = this.keyword
            params.orderByDescColumn = this.orderByDescColumn
            params.orderByAscColumn = this.orderByAscColumn
            getTagList(params).then(res => {
                this.currentPage = res.data.current
                this.pageSize = res.data.size
                this.total = res.data.total
                this.tableData = res.data.records
            })
        },
        handleFind() {
            this.currentPage = 1
            this.tagList()
        },
        handleStick(row) {
            this.$confirm("此操作将会把该标签放到首位, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                let params = {}
                params.uid = row.uid
                stickTag(params).then(res => {
                    this.tagList()
                })
            }).catch(() => {
                // this.$commonUtil.message.info("已取消置顶")
            });

        },
        handleTagSortByCite() {
            this.$confirm(
                "此操作将根据点击量对所有的标签进行降序排序, 是否继续?",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }
            ).then(() => {
                tagSortByCite().then(res => {
                    this.tagList()
                })

            }).catch(() => {
                // this.$commonUtil.message.info("已取消批量排序")
            });
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.tagList()
        },
        submitForm() {

            // 如果是编辑标签提交
            if (this.isEditForm) {
                editTag(this.form).then(res => {
                    this.dialogFormVisible = false
                    this.tagList()
                })
            } else {
                console.log('新增');
            }

        },
        handleEdit(row) {
            this.title = '编辑标签'
            this.dialogFormVisible = true
            this.isEditForm = true
            this.form = row

        },
        handleAdd() {
            this.title = '新增标签'
            this.dialogFormVisible = true
            this.isEditForm = false
        }
    }
}
</script>

<style scoped></style>